<template>
	<view class="container">
		<view class="list-cell b-b m-t" @click="navTo('个人资料')" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">头像</text>
			<cropper selWidth="660rpx" selHeight="660rpx" class="cell-tip image" style="position: absolute;
    right: 36px;"  @upload="myUpload" :avatarSrc="imgurl" avatarStyle="border-radius: 50%;height: 35px;width: 35px;width:70rpx;height:70rpx;">
			</cropper>
			<text class="cell-more yticon icon-you"></text>
		</view>
		
		<uni-popup ref="popup" type="center">
		</uni-popup>

		<view class="list-cell b-b" @click="navTo('个人资料')" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">名称</text>
			<input class="cell-tip " focus value="秋哲" @blur="setPerData(1, 2)" style="text-align: right;" />
			<text class="cell-more yticon icon-you"></text>
		</view>

		<view class="list-cell b-b" @click="navTo('个人资料')" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">联系方式</text>
			<text class="cell-tip">183****5236</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell b-b" @click="navTo('个人资料')" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">证件号码</text>
			<text class="cell-tip">450112xxxxxxxx2017</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell b-b" @click="navTo('个人资料')" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">修改密码</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
	</view>
</template>
<script>
import uniIcon from '@/components/uni-icon/uni-icon.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import kpsImageCutter from '@/components/ksp-image-cutter/ksp-image-cutter.vue';
import { mapMutations } from 'vuex';
	import cropper from "@/components/cropper.vue";
export default {
	data() {
		return {
			imgurl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/avatar/000/88/01/68_avatar_max.jpg',
			path: ''
		};
	},
	methods: {
		...mapMutations(['logout']),
		navTo(url) {
			// this.$api.msg(`${url}`);
			uni.navigateTo({
				url: url
			});
		},
		//switch
		switchChange(e) {
			let statusTip = e.detail.value ? '打开' : '关闭';
			this.$api.msg(`${statusTip}消息推送`);
		},
		open() {
			// 需要在 popup 组件，指定 ref 为 popup
			this.$refs.popup.open();
			uni.chooseImage({
				success: res => {
					// 设置url的值，显示控件
					this.url = res.tempFilePaths[0];
				}
			});
		},
		setPerData(type, data) {
			console.log(type, data);
		},
		
		onok(ev) {
			this.path = ev.path;
			this.url = '';
		},
		oncancle() {
			// url设置为空，隐藏控件
			this.url = '';
		},
		myUpload(rsp) {
		  const self = this;
		  self.imgurl = rsp.path; //更新头像方式一
		  // rsp.avatar.imgSrc = rsp.path; //更新头像方式二
		},
	},
	components: { uniIcon, uniPopup, kpsImageCutter,cropper }
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
}
.list-cell {
	display: flex;
	align-items: baseline;
	padding: 20upx $page-row-spacing;
	line-height: 60upx;
	position: relative;
	background: #fff;
	justify-content: center;
	&.log-out-btn {
		margin-top: 40upx;
		.cell-tit {
			color: $uni-color-primary;
			text-align: center;
			margin-right: 0;
		}
	}
	&.cell-hover {
		background: #fafafa;
	}
	&.b-b:after {
		left: 30upx;
	}
	&.m-t {
		margin-top: 16upx;
	}
	.cell-more {
		align-self: baseline;
		font-size: $font-lg;
		color: $font-color-light;
		margin-left: 10upx;
	}
	.cell-tit {
		flex: 1;
		font-size: $font-base + 2upx;
		color: $font-color-dark;
		margin-right: 10upx;
	}
	.cell-tip {
		font-size: $font-base;
		color: $font-color-light;
	}
	switch {
		transform: translateX(16upx) scale(0.84);
	}
}
</style>
